<template>
  <div id="container">
    <section id="main">	
      <h1 class="headLine01">
          <input type="button" @click="subtractMonth" value="<">
          {{billdatestr}}
          <input type="button" @click="addMonth" value=">">
      </h1>
    <div v-show="!billList.length">
        請求データありません
    </div>

    <div v-show="billList.length">
        <div v-for="(detail, idx) in billList" :key="idx">
            <div v-if="detail">
            棟No.{{detail.ridgeNo}}  部屋番号{{detail.roomNo}}<br/>
            {{customerName}}<br/>

            請求内容　請求金額<br/>
            <div v-if="detail.billAccount1">
                {{detail.billAccount1}} ~ {{detail.billAmount1}}<br/>
            </div>
            <div v-if="detail.billAccount2">
                {{detail.billAccount2}} ~ {{detail.billAmount2}}<br/>
            </div>
            <div v-if="detail.billAccount3">
                {{detail.billAccount3}} ~ {{detail.billAmount3}}<br/>
            </div>
            <div v-if="detail.billAccount4">
                {{detail.billAccount4}} ~ {{detail.billAmount4}}<br/>
            </div>
            <div v-if="detail.billAccount5">
                {{detail.billAccount5}} ~ {{detail.billAmount5}}<br/>
            </div>
            <div v-if="detail.billAccount6">
                {{detail.billAccount6}} ~ {{detail.billAmount6}}<br/>
            </div>
            <div v-if="detail.billAccount7">
                {{detail.billAccount7}} ~ {{detail.billAmount7}}<br/>
            </div>
            <div v-if="detail.billAccount8">
                {{detail.billAccount8}} ~ {{detail.billAmount8}}<br/>
            </div>
            <div v-if="detail.billAccount9">
                {{detail.billAccount9}} ~ {{detail.billAmount9}}<br/>
            </div>
            <div v-if="detail.billAccount10">
                {{detail.billAccount10}} ~ {{detail.billAmount10}}<br/>
            </div>
            御請求金額 ~ {{detail.totalAmount}}<br/>
            ※未納金に関しては下記管理組合口座へお振込みください。<br/>

            銀行名：{{detail.bankName}}<br/>
            支店名：{{detail.bankBranch}}<br/>
            口座種類：{{detail.bankAccountType}}<br/>
            口座番号：{{detail.bankAccountNo}}<br/>
            口座名義：{{detail.bankAccountName}}<br/>
            <br/>
            <br/>
            </div>
        </div>
    </div>


    </section>
  </div>
</template>

<script>
import moment from 'moment'
export default {
	data() {
		return {
            customerName: '',
			filter: {
                billDate:''
            },
            billdate: moment(new Date()).format('YYYY-MM-DD'),
            billdatestr: '',
            billList:[]
		}
    },
    
	created() {
        this.customerName = this.Session.get('customerName');
        this.filter.billDate = moment(new Date()).format('YYYYMM')
        this.getInitData();
        this.billdatestr = moment(this.billdate).format('YYYY年MM月');
    },

    methods: {
        getInitData() {
            this.Api.get('bill', this.filter).then(res => {
                if (res.data.data) {
                    this.billList = res.data.data;
                }
            }).catch(err => {
            });
        },

        addMonth() {
            let dateArr = this.billdate.split('-');
            var year = dateArr[0];
            var month = dateArr[1];
            let day = dateArr[2];
            month =  parseInt(month) + 1;
            if (month > 12) {
                year = parseInt(year) + 1;
                month = 1;
            }
            this.billdate = moment(new Date(year, month, 0)).format('YYYY-MM-DD');
            this.billdatestr = moment(this.billdate).format('YYYY年MM月');
            this.filter.billDate = moment(new Date(this.billdate)).format('YYYYMM')
            this.getInitData();
        },
        subtractMonth() {
            let dateArr = this.billdate.split('-');
            var year = dateArr[0];
            var month = dateArr[1];
            let day = dateArr[2];
            month =  parseInt(month) -1;
            if (month < 1) {
                year = parseInt(year) - 1;
                month = 12;
            }
            this.billdate = moment(new Date(year, month, 0)).format('YYYY-MM-DD');
            this.billdatestr = moment(this.billdate).format('YYYY年MM月');
            this.filter.billDate = moment(new Date(this.billdate)).format('YYYYMM')
            this.getInitData();
        }
    }
    
}
</script>
